import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { Row, Col, Card, Button, message, Form, Input, Modal, InputNumber } from 'antd';
import StandardTable from 'components/StandardTable';
import PageHeaderLayout from './../../layouts/PageHeaderLayout';
import styles from './list.less';
import information from './../../utils/message';

const ButtonGroup = Button.Group;
const FormItem = Form.Item;
const confirm = Modal.confirm;

const CreateForm = Form.create()((props) => {
    const { modalVisible, form, handleAdd, handleModalVisible, brandBer } = props;
    const okHandle = () => {
        form.validateFields((err, fieldsValue) => {
            if (err) return;
            const prime = fieldsValue;
            form.resetFields();
            handleAdd(prime, brandBer.id);
        });
    };
    const canaleModal = () => {
        handleModalVisible();
        form.resetFields();
    };
    return (
        <Modal
            title="编辑等级信息"
            visible={modalVisible}
            onOk={okHandle}
            onCancel={canaleModal}
        >
            <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                <Col md={24} sm={24}>
                    <FormItem
                        labelCol={{ span: 6 }}
                        wrapperCol={{ span: 14 }}
                        label="等级名"
                    >
                        {form.getFieldDecorator('name', {
                            rules: [{ required: true, message: '请输入正确的等级名' }],
                            initialValue: brandBer.name,
                        })(
                            <Input placeholder="请输入" />
                        )}
                    </FormItem>
                    <FormItem
                        labelCol={{ span: 6 }}
                        wrapperCol={{ span: 14 }}
                        label="等级排序值"
                    >
                        {form.getFieldDecorator('grade', {
                            rules: [{ required: true, message: '请输入正确的数字' }],
                            initialValue: brandBer.grade,
                        })(
                            <InputNumber />
                        )}
                    </FormItem>
                    <FormItem
                        labelCol={{ span: 6 }}
                        wrapperCol={{ span: 14 }}
                        label="折扣值"
                    >
                        {form.getFieldDecorator('discount', {
                            rules: [{ required: true, message: '请输入正确的数字' }],
                            initialValue: brandBer.discount,
                        })(
                            <InputNumber min={0} max={100} step={0.01} />
                        )}
                    </FormItem>

                </Col>
            </Row>
        </Modal>
    );
});

const NewForm = Form.create()((props) => {
    const { modalVisible, form, handleAdd, handleModalVisible } = props;
    const okHandle = () => {
        form.validateFields((err, fieldsValue) => {
            if (err) return;
            const prime = fieldsValue;
            form.resetFields();
            handleAdd(prime);
        });
    };
    const canaleModal = () => {
        handleModalVisible();
        form.resetFields();
    };
    return (
        <Modal
            title="新增等级信息"
            visible={modalVisible}
            onOk={okHandle}
            onCancel={canaleModal}
        >
            <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                <Col md={24} sm={24}>
                    <FormItem
                        labelCol={{ span: 6 }}
                        wrapperCol={{ span: 14 }}
                        label="等级名"
                    >
                        {form.getFieldDecorator('name', {
                            rules: [{ required: true, message: '请输入正确的等级名' }],
                        })(
                            <Input placeholder="请输入" />
                        )}
                    </FormItem>
                    <FormItem
                        labelCol={{ span: 6 }}
                        wrapperCol={{ span: 14 }}
                        label="等级排序值"
                    >
                        {form.getFieldDecorator('grade', {
                            rules: [{ required: true, message: '请输入正确的数字' }],
                        })(
                            <InputNumber placeholder="请输入" />
                        )}
                    </FormItem>
                    <FormItem
                        labelCol={{ span: 6 }}
                        wrapperCol={{ span: 14 }}
                        label="折扣值"
                    >
                        {form.getFieldDecorator('discount', {
                            rules: [{ required: true, message: '请输入正确的数字' }],
                        })(
                            <InputNumber min={0} max={100} step={0.01} />
                        )}
                    </FormItem>
                </Col>
            </Row>
        </Modal>
    );
});

@connect(({ grade, loading }) => ({
    grade,
    loading: loading.models.grade,
}))
@Form.create()
export default class grade extends PureComponent {
    state = {
        loading: false,
        selectedRows: [],
        modalVisible: false,
        modalVisibleAdd: false,
        brandBer: {},
        searchForm: {},
    };

    componentDidMount() {
        this.gainList(1, 10);
    }

    gainList = (page, size, data) => {
        const { dispatch } = this.props;
        dispatch({
            type: 'grade/fetch',
            payload: {
                page,
                size,
                data,
            },
        });
    }

    handleModalVisible = (flag) => {
        this.setState({
            modalVisible: !!flag,
        });
    };

    brandAdd = (flag) => {
        this.setState({
            modalVisibleAdd: !!flag,
        });
    };


    handleEdit = (fields, id) => {
        const parime = fields;
        const { dispatch } = this.props;
        dispatch({
            type: 'grade/edit',
            payload: {
                ...parime,
                id,
            },
            callback: (data) => {
                information(data);
                this.gainList(this.props.grade.grade.page, this.props.grade.grade.size, this.state.searchForm);
            },
        });
        this.setState({
            modalVisible: false,
        });
    };

    handleAdd = (fields) => {
        const parime = fields;
        const { dispatch } = this.props;
        dispatch({
            type: 'grade/add',
            payload: {
                ...parime,
            },
            callback: (data) => {
                information(data);
                this.gainList(this.props.grade.grade.page, this.props.grade.grade.size, this.state.searchForm);
            },
        });
        this.setState({
            modalVisibleAdd: false,
        });
    };

    brandDel = (fields) => {
        const { dispatch, grade: { grade } } = this.props;
        confirm({
            title: '删除',
            content: '确认删除本条条目?',
            okType: 'danger',
            okText: '确认',
            cancelText: '取消',
            onOk: () => {
                dispatch({
                    type: 'grade/del',
                    payload: {
                        id: fields.id,
                    },
                    callback: (data) => {
                        information(data);
                        this.gainList(grade.page, grade.size, this.state.searchForm);
                    },
                });
            },
            onCancel() {
            },
        });
    };

    handleSelectRows = (rows) => {
        this.setState({
            selectedRows: rows,
        });
    };

    handleStandardTableChange = (pagination, filters, sorter) => {
        const data = { ...pagination.searchForm };
        this.gainList(pagination.current, pagination.pageSize, data);
    };

    handleFormReset = () => {
        const { form, dispatch } = this.props;
        form.resetFields();
        this.setState({ searchForm: {} });
    };

    handleSearch = (e) => {
        e.preventDefault();

        const { dispatch, form } = this.props;

        form.validateFields((err, fieldsValue) => {
            if (err) return;
            if (fieldsValue.id && fieldsValue.id.toString().length > 10) {
                message.error('id小于等于10位');
                return;
            }
            this.setState({
                searchForm: { ...fieldsValue },
            });
            dispatch({
                type: 'grade/fetch',
                payload: {
                    page: 1,
                    size: this.props.grade.grade.size,
                    data: {
                        ...fieldsValue,
                    },
                },
            });
        });
    };

    renderBrandForm() {
        const { getFieldDecorator } = this.props.form;
        return (
            <Form onSubmit={this.handleSearch} layout="inline">
                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                    <Col md={6} sm={24}>
                        <FormItem label="等级ID">
                            {getFieldDecorator('id', {
                                initialValue: '',
                            })(
                                <InputNumber style={{ width: '100%' }} min={1} max={2147483647} placeholder="请输入" />
                            )}
                        </FormItem>
                    </Col>
                    <Col md={6} sm={24}>
                        <FormItem label="等级名字">
                            {getFieldDecorator('name', {
                                initialValue: '',
                            })(
                                <Input placeholder="请输入" />
                            )}
                        </FormItem>
                    </Col>

                    <Col md={6} sm={24}>
                        <span className={styles.submitButtons} style={{ textAlign: 'right' }}>
                            <Button icon="search" htmlType="submit">查询</Button>
                            <Button style={{ marginLeft: 8 }} type="dashed" onClick={this.handleFormReset}>重置</Button>
                            <Button style={{ marginLeft: 8 }} type="primary" onClick={this.brandAdd}>新增</Button>
                        </span>
                    </Col>
                </Row>
            </Form>
        );
    }

    render() {
        const { selectedRows, brandBer, modalVisible, modalVisibleAdd } = this.state;
        const { grade: { grade }, loading, dispatch } = this.props;
        const parentMethods = {
            handleAdd: this.handleEdit,
            handleModalVisible: this.handleModalVisible,
            brandBer,
            loading,
        };
        const AddBrand = {
            loading,
            handleAdd: this.handleAdd,
            handleModalVisible: this.brandAdd,
        };
        const columns = [
            {
                title: 'ID',
                dataIndex: 'id',
            },
            {
                title: '等级名字',
                dataIndex: 'name',
            },
            {
                title: '等级排序值',
                dataIndex: 'grade',
            },
            {
                title: '折扣值',
                dataIndex: 'discount',
            },
            {
                title: '操作',
                render: (val, record) => (
                    <Fragment>
                        <ButtonGroup>
                            <Button type="ghost" onClick={() => {
                                this.handleModalVisible(true);
                                this.setState({
                                    brandBer: record,
                                });
                            }}>编辑</Button>
                            <Button type="danger" onClick={() => {
                                this.brandDel(record);
                            }}>删除</Button>
                        </ButtonGroup>
                    </Fragment>
                ),
            },
        ];

        return (
            <PageHeaderLayout title="等级列表">
                <Card bordered={false}>
                    <div className={styles.tableList}>
                        <div className={styles.tableListForm}>
                            {this.renderBrandForm()}
                        </div>
                        <StandardTable
                            selectedRows={selectedRows}
                            loading={loading}
                            data={grade}
                            columns={columns}
                            onSelectRow={this.handleSelectRows}
                            onChange={this.handleStandardTableChange}
                            searchForm={this.state.searchForm}
                        />
                    </div>
                </Card>
                <CreateForm
                    {...parentMethods}
                    modalVisible={modalVisible}
                />
                <NewForm
                    {...AddBrand}
                    modalVisible={modalVisibleAdd}
                />
            </PageHeaderLayout>
        );
    }
}
